<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<wlk-navbar :title="scrollTop>0?'线路详情':''" :navbarType='scrollTop>0?0:5'></wlk-navbar>
		<wlk-canvas mode="line" :item="line" :qrcode="qrcode" ref="childComponent"></wlk-canvas>
		<wlk-line-poster mode="line" :posterImg="line.poster" :qrcode="qrcode"
			ref="childPosterComponent"></wlk-line-poster>
		<block v-if="!loading">
			<block v-if="!$u.test.isEmpty(line.suitinfo)">
				<!-- H5 -->
				<view class="relative"><!-- style="margin-top: 42px;" -->
					<!-- 微信小程序 -->
					<!-- <view class="relative" style="margin-top: -47px;"> -->
					<u-swiper radius="0" :list="line.images" indicator :autoplay="false"
						:indicatorStyle="indicatorStyle" indicatorMode="dot" height="410"
						@change="e => swiperCurrent = e.current"></u-swiper>
					<view class="wd100 inside-info" v-if=" line.images && line.images[0].poster && swiperCurrent>0">
						{{line.inside}}
					</view>
				</view>
				<view class="detail-content">
					<view class="content-title">
						<view class="title">{{line.title}}</view>
						<view class="desc u-line-1">{{line.desc}}</view>
						<view class="wlkflex justify-between mt05">
							<view class="wlkflex tags wrap">
								<view class="tags-item" v-for="(tag,i) in line.tagids" :key="i" v-if="i<10">
									<u-tag :text="tag.name" size="mini" type="info" bgColor="#F9F9F9" color="#999"
										borderColor="#F3F3F3"></u-tag>
								</view>
							</view>
							<view class="sales">
								{{line.sales}}人出游
							</view>
						</view>
						<view class="wd100 price-info wlkflex justify-between">
							<view v-if="line.adultMinPrice>0" class="bold">
								<span>￥</span>
								<span class="price">{{line.adultMinPrice}}</span>
								<span class="ml05">起</span>
								<span class="sub f26 ml20 prices fn">{{line.suitinfo[suitIndex].price}}元</span>
							</view>
							<view v-else>
								<span class="col9">暂无库存</span>
							</view>
							<view class="share-btn" @click="showShare=true">
								<u-icon name="share" :color="themeColor" size="27"></u-icon>
							</view>
						</view>
					</view>
					<u-gap height="8" bgColor="#F9F9F9"></u-gap>
					<view class="pd30">
						<view class="pack">
							<view class="head-title mb20 d-b-c">
								<text>可选套餐</text>
								<text class="sub f24 fn" @click="setYd(true)">预定限制</text>
							</view>
							<view class="wd100 overHidden">
								<u-scroll-list :indicator="false">
									<view class="d-f">
										<view @click="radioClick(index)"
											:class="'overHidden pack-item pr p20 br04 relative'+[suitIndex==index?'active':'']"
											:style="suitIndex==index?'border-color:'+themeColor:''"
											v-for="(item, index) in line.suitinfo" :key="index">
											<!-- <view class="wd100 center name" :style="suitIndex==index?'color:'+themeColor:'color:#999999'">
												{{item.name}}
											</view> -->
											<view class="price d-s-c" :style="suitIndex==index?'color:'+themeColor:'color:#999999'">
												<view class="f20 mr5">￥</view>
												<view class="f40">{{item.price}}</view>
												<view class="f20 sub ml5">起</view>
											</view>
											<view class="f26 vertical2">{{item.name}}</view>
											<view class="iconList f22">
												<view class="item d-s-c mt10" v-if="item.traffic">
													<view class="icon br_50 mr5 f18 d-c-c">行</view>
													<view class="value">{{item.traffic}}</view>
												</view>
												<view class="item d-s-c mt10" v-if="item.stay">
													<view class="icon br_50 mr5 f18 d-c-c">住</view>
													<view class="value">{{item.stay}}</view>
												</view>
												<view class="item d-s-c mt10" v-if="item.people">
													<view class="icon br_50 mr5 f18 d-c-c">人</view>
													<view class="value">{{item.people}}</view>
												</view>
												<view class="item d-s-c mt10" v-if="item.characteristic">
													<view class="icon br_50 mr5 f18 d-c-c">游</view>
													<view class="value">{{item.characteristic}}</view>
												</view>
												<view class="item d-s-c mt10" v-if="item.shopping">
													<view class="icon br_50 mr5 f18 d-c-c">购</view>
													<view class="value">{{item.shopping}}</view>
												</view>
												<view class="item d-s-c mt10" v-if="item.guide">
													<view class="icon br_50 mr5 f18 d-c-c">导</view>
													<view class="value">{{item.guide}}</view>
												</view>
												<view class="item d-s-c mt10" v-if="item.meals">
													<view class="icon br_50 mr5 f18 d-c-c">餐</view>
													<view class="value">{{item.meals}}</view>
												</view>
											</view>
											<view class="active-icon" :style="{backgroundColor:themeColor}"
												v-if="suitIndex==index"><u-icon size="12" name="checkmark" color="#FFFFFF"></u-icon>
											</view>
										</view>
									</view>
								</u-scroll-list>
							</view>
						</view>
						<view class="calendar mt20">
							<view class="head-title mb20">近期出发</view>
							<view class="wd100 relative" v-if="line.suitinfo[suitIndex].priceinfo.length>0">
								<u-scroll-list :indicator="false">
									<view class="wlkflex">
										<view
											:class="'overHidden calendar-item br04 relative wlkflex '+[priceIndex==item.date?'active':'']"
											:style="priceIndex==item.date?'border-color:'+themeColor:''"
											v-for="(item, index) in line.suitinfo[suitIndex].priceinfo" v-if="index<15"
											:key="index">
											<view class="wd100 center name" @click="dayClick(item.date)">
												<view class="date">
													<span class="bold">{{item.read_date}}</span>
													<span class="col9 ml05">{{item.read_date_day}}</span>
												</view>
												<view class="mt05 price" v-if="item.stock=='-1' || item.stock>0">
													￥{{item.price}}
												</view>
												<view class="mt05 col9" v-else>已报满</view>
											</view>
											<view class="active-icon" :style="{backgroundColor:themeColor}"
												v-if="priceIndex==item.date">
												<u-icon size="12" name="checkmark" color="#FFFFFF"></u-icon>
											</view>
										</view>
									</view>
								</u-scroll-list>
								<view class="show-more" @click="jump('/pages/line/before')">
									<text class="text">更多班期</text>
									<view class=""><u-icon name='arrow-right' size='12' color='#555'></u-icon> </view>
								</view>
							</view>
							<view v-else>
								<u-empty mode="data" iconSize="43">
								</u-empty>
							</view>
						</view>
					</view>
					<u-gap height="8" bgColor="#F9F9F9"></u-gap>
					<view class="merch-card pd30 br04 wlkflex justify-between">
						<view class="merch-info wlkflex">
							<view class="logo">
								<u-avatar size="47" :src="line.merch.logo"></u-avatar>
							</view>
							<view class="name ml15">
								<view class="u-line-1">
									{{line.merch.name}}
								</view>
								<view class="merch-tag mt05 vertical">
									<u-tag text="供应商" size="mini" type="info" bgColor="#F9F9F9" color="#999"
										borderColor="#F3F3F3"></u-tag>
								</view>
							</view>
						</view>
						<navigator class="btn" :style="{backgroundColor:themeColor}"
							:url="'/pages/line/list?merchid='+line.merch.id">
							其他线路
						</navigator>
					</view>
					<u-gap height="8" bgColor="#F9F9F9"></u-gap>
					<u-sticky bgColor="#fff">
						<view class="content-tabs">
							<u-tabs :activeStyle="{
                        color: themeColor,
                        fontSize: '28rpx',
                        padding:'0 9rpx',
                        fontWeight: 'bold',
                        transform: 'scale(1.05)'
                    }" :itemStyle="{
                         height: '40px',
                         alignItems:'flex-start',
                         padding:'0 30rpx',
                    }" :inactiveStyle="{
                        color: '#646566',
                        fontSize: '28rpx',
                        padding:'0 9rpx',
                        transform: 'scale(1)'
                    }" :list="line.contentList" lineWidth="35" lineHeight="2" :current="current"
								:lineColor="themeColor" @change="changeTab"></u-tabs>
						</view>
					</u-sticky>
					<view class="u-content pd30">
						<view v-if="line.contentList[current].showtype == 'content'">
							<u-parse :content="line.contentList[current].value"></u-parse>
						</view>
						<view v-else>
							<view class="route-box" v-for="(day,k) in line.contentList[current].value"
								:style="{borderColor:themeColor}" :key="k">
								<view class="day-num" :style="{backgroundColor:themeColor,borderColor:themeColor}">
									第{{k+1}}天</view>
								<view class="day-title">{{day.name}}</view>
								<view class="step-nav">
									<view class="relative step-box" v-if="day.city">
										<view class="name">城市</view>
										<view class="desc mt05">{{day.city}}</view>
										<view class="icon-box">
											<view class="custom-icon custom-icon-city" :style="{color:themeColor}">
											</view>
										</view>
									</view>
									<view class="relative step-box" v-if="day.travel">
										<view class="name">交通</view>
										<view class="desc mt05">{{day.travel}}</view>
										<view class="icon-box">
											<view class="custom-icon custom-icon-travel" :style="{color:themeColor}">
											</view>
										</view>
									</view>
									<view class="relative step-box" v-if="day.meals">
										<view class="name">用餐</view>
										<view class="desc mt05">{{day.meals}}</view>
										<view class="icon-box">
											<view class="custom-icon custom-icon-meals" :style="{color:themeColor}">
											</view>
										</view>
									</view>
									<view class="relative step-box" v-if="day.stay">
										<view class="name">住宿</view>
										<view class="desc mt05">{{day.stay}}</view>
										<view class="icon-box">
											<view class="custom-icon custom-icon-stay" :style="{color:themeColor}">
											</view>
										</view>
									</view>
									<view class="relative step-box" style="border-left:none" v-if="day.content">
										<view class="name">行程</view>
										<view class="desc mt05">
											<u-parse :content="day.content"></u-parse>
										</view>
										<view class="icon-box" style="left: -30rpx;">
											<view class="custom-icon custom-icon-route" :style="{color:themeColor}">
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-back-top :scroll-top="scrollTop" top="400" z-index="9999" icon="arrow-up" :customStyle="{
            backgroundColor:themeColor
        }" :iconStyle="iconStyle"></u-back-top>

				<view class="fixed-buy-btn wd100 wlkflex justify-between">
					<view class="other-btn wlkflex justify-between">
						<view class="like-btn flex-1" @click="likeFun">
							<u-icon labelPos="bottom" labelColor="#333" labelSize="12px" label="收藏" name="star-fill"
								size="27" :color="themeColor" v-if="line.user_like"></u-icon>
							<u-icon labelPos="bottom" labelColor="#333" labelSize="12px" label="收藏" name="star"
								color="#333" size="27" v-else></u-icon>
						</view>
						<!-- <view class="tel-btn" @click="callPhone(line.merch.mobile)">
							<u-icon labelPos="bottom" labelColor="#333" labelSize="12px" label="电话" name="phone"
								color="#333" size="27"></u-icon>
						</view> -->
						<button class="flex-1 kf-btn" v-if="line.merch.kf_mode=='wechar'" open-type="contact">
							<u-icon labelPos="bottom" labelColor="#333" labelSize="12px" label="客服" name="server-man"
								color="#333" size="27"></u-icon>
						</button>
						<view class="kf-btn flex-1" v-else @click="servicer()">
							<u-icon labelPos="bottom" labelColor="#333" labelSize="12px" label="客服" name="server-man"
								color="#333" size="27"></u-icon>
						</view>
					</view>
					<view class="buy-btn">
						<u-button :customStyle="{fontWeight: 'bold',height:'90rpx'}" :color="themeColor" size="large"
							:disabled="!line.minprice>0" shape="circle" :text="line.minprice>0?'立即预订':'暂无库存'"
							@click="jump('/pages/line/before')"></u-button>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="not-data">
					<u-empty :icon="uEmpty.data" text="没有可选套餐">
					</u-empty>
				</view>
			</block>
		</block>
		<u-action-sheet :show="showYD" @close="setYd(false)" title="预定限制" :round="10" closeOnClickOverlay
			safeAreaInsetBottom>
			<view class="tip-content" v-html="line.suitinfo[suitIndex].content"></view>
		</u-action-sheet>
		<u-popup safeAreaInsetBottom :customStyle="shareStyle" :show="showShare" @close="closeShare" round="20">
			<view class="share-box">
				<view class="pd30">
					<view class="center title">立即分享给好友</view>
					<view class="share-btn-info wlkflex">
						<!-- #ifdef H5 || MP-WEIXIN -->
						<block v-if="platform=='wxMiniProgram'">
							<button open-type="share" @share='onShareAppMessage' class="wlkflex justify-center wrap">
								<view class="icon-box wlkflex justify-center" style="background-color: #07c160">
									<u-icon name="weixin-fill" size="32" color="#FFFFFF"></u-icon>
								</view>
								<view class="btn-name wd100 center mt10">微信好友</view>
							</button>
						</block>
						<block v-else-if="platform=='wxOfficialAccount'">
							<view class="wlkflex justify-center wrap" @click="showH5Share=true">
								<view class="icon-box wlkflex justify-center" style="background-color: #07c160">
									<u-icon name="weixin-fill" size="32" color="#FFFFFF"></u-icon>
								</view>
								<view class="btn-name wd100 center mt10">微信好友</view>
							</view>
						</block>
						<block v-else>
							<view class="wlkflex justify-center wrap" @click="copyLink">
								<view class="icon-box wlkflex justify-center">
									<i class="gg-link"
										style="color: #606266;transform: rotate(-45deg) scale(var(--ggs, 1.2));"></i>
								</view>
								<view class="btn-name wd100 center mt10">复制链接</view>
							</view>
						</block>
						<!-- #endif -->
						<view class="wlkflex justify-center wrap" @click="canvas">
							<view class="icon-box wlkflex justify-center">
								<u-icon name="photo-fill" size="32" :color="themeColor"></u-icon>
							</view>
							<view class="btn-name wd100 center mt10">分享海报</view>
						</view>
						<view class="wlkflex justify-center wrap" @click="poster" v-if="!$u.test.isEmpty(line.poster)">
							<view class="icon-box wlkflex justify-center">
								<u-icon name="fingerprint" size="32" :color="themeColor"></u-icon>
							</view>
							<view class="btn-name wd100 center mt10">长图海报</view>
						</view>
					</view>
				</view>
				<u-gap height="8" bgColor="#F9F9F9"></u-gap>
				<view class="close center" @click="closeShare">取消</view>
			</view>
		</u-popup>
		<u-overlay :show="showH5Share" @click="showH5Share = false">
			<view class="wd100 hg100">
				<image src="/static/images/other/share.png" class="share-image" mode="widthFix"></image>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import {
		formatRichText,
		makePhoneCall,
		copy,
		toUrl,
		toWork
	} from '@/wlkutils/tools';
	import platform from "@/wlkutils/platform";
	import share from "@/wlkutils/share";
	import {
		mapMutations,
		mapGetters
	} from 'vuex';
	var _self;
	export default {
		computed: {
			...mapGetters(['userInfo', 'themeColor', 'isLogin', 'uEmpty'])
		},
		data() {
			return {
				id: '',
				line: {},
				scrollTop: 0,
				swiperCurrent: 0,
				current: 0,
				loading: true,
				showShare: false,
				showH5Share: false,
				indicatorStyle: {
					bottom: '80rpx',
					left: '30rpx'
				},
				suitIndex: 0,
				priceIndex: 0,
				iconStyle: {
					color: '#FFFFFF'
				},
				shareStyle: {},
				platform: platform.get(),
				showCanvas: false,
				showPoster: false,
				qrcode: '',
				showYD: false
			};
		},
		onLoad(options) {
			_self = this;
			_self.id = this.$Route.query.id;
			if (_self.id > 0) {
				this.getData();
			}
		},
		onShow() {

		},
		onPageScroll: function(e) {
			_self.scrollTop = e.scrollTop;
		},
		onShareAppMessage(res) {
			let data = new Object();
			data.title = this.line.title;
			data.desc = this.line.desc;
			data.params = {
				id: this.id
			};
			data.imageUrl = this.line.images[0].poster ? this.line.images[1].url : this.line.images[0];
			return share.setShareInfo(data);
		},
		methods: {
			...mapMutations(["setLoginPopupShow"]),
			setYd(bool) {
				this.showYD = bool
			},
			closeShare() {
				this.showShare = false;
			},
			radioClick(index) {
				this.suitIndex = index;
				this.priceIndex = this.line.suitinfo[this.suitIndex].priceinfo[0] ? this.line.suitinfo[this.suitIndex]
					.priceinfo[0].date : 0;
			},
			dayClick(index) {
				this.priceIndex = index;
			},
			changeTab(item) {
				this.current = item.index
			},
			getData() {
				_self.loading = true;
				uni.$u.http.post('line/getDetail', {
					id: _self.id
				}).then(res => {
					_self.line = res.data.line;
					_self.initShareInfo();
					if (_self.line.contentList.length > 0) {
						_self.line.contentList.forEach(function(v, k) {
							if (v.showtype == 'content') {
								_self.line.contentList[k].value = v.value ? formatRichText(v.value) : '';
							} else {
								_self.line.contentList[k].value.forEach(function(a, b) {
									_self.line.contentList[k].value[b].content = a.content ?
										formatRichText(a.content) : '';
								})
							}
						})
					}
					if (!uni.$u.test.isEmpty(_self.line.suitinfo)) {
						_self.priceIndex = !uni.$u.test.isEmpty(_self.line.suitinfo[_self.suitIndex].priceinfo) ?
							_self.line.suitinfo[_self.suitIndex].priceinfo[0].date : 0;
					}
					_self.loading = false;
				}).catch(res => {

				})
			},
			async likeFun() {
				let res = await uni.$u.http.post('like/setLineLike', {
					id: _self.id
				}, {
					custom: {
						load: false
					}
				}).catch((error) => {
					uni.$u.toast(`${error.message}`)
					return false
				});
				if (res) {
					uni.$u.toast(res.msg)
					this.line.user_like = !this.line.user_like;
				}
			},
			callPhone(phone) {
				makePhoneCall(phone);
			},
			servicer() {
				console.log(this.line.merch.kf_url, this.line.merch.corp_id);
				return
				toWork(this.line.merch.kf_url, this.line.merch.corp_id);
			},
			copyLink() {
				let params = {
					id: this.id
				};
				let shareInfo = this.initShareInfo();
				copy(shareInfo.copyLink);
				_self.showShare = false;
			},
			async canvas() {
				if (!this.isLogin) {
					this.showShare = false;
					this.setLoginPopupShow(true);
					return false;
				}
				// 渲染
				// #ifndef MP
				let params = {
					id: this.id
				};
				let shareInfo = this.initShareInfo();
				this.qrcode = shareInfo.copyLink;
				this.$refs.childComponent.canvas();
				this.showShare = false;
				// #endif
				// #ifdef MP
				let res = await uni.$u.http.post('wechat/getUnlimitedQRCode', {
					id: this.id,
					type: 'line'
				}, {
					custom: {
						hideMsg: true
					}
				}).then(res => {
					_self.qrcode = res.data;
					_self.$refs.childComponent.canvas();
					_self.showShare = false;
				})
				// #endif

			},
			async poster() {
				if (!this.isLogin) {
					this.showShare = false;
					this.setLoginPopupShow(true);
					return false;
				}
				// 渲染
				// #ifndef MP
				let params = {
					id: this.id
				};
				let shareInfo = this.initShareInfo();
				this.qrcode = shareInfo.copyLink;
				this.$refs.childPosterComponent.canvas();
				this.showShare = false;
				// #endif
				// #ifdef MP
				let res = await uni.$u.http.post('wechat/getUnlimitedQRCode', {
					id: this.id,
					type: 'line'
				}, {
					custom: {
						hideMsg: true
					}
				}).then(res => {
					_self.qrcode = res.data;
					_self.$refs.childPosterComponent.canvas();
					_self.showShare = false;
				})
				// #endif

			},
			initShareInfo() {
				let data = new Object();
				data.title = this.line.title;
				data.desc = this.line.desc;
				data.params = {
					id: this.id
				};
				data.imageUrl = this.line.images[0].poster ? this.line.images[1].url : this.line.images[0];
				return share.setShareInfo(data);
			},
			jump(url) {
				if (!this.isLogin) {
					this.setLoginPopupShow(true);
					return false;
				} else {
					let query = {
						id: this.line.id,
						suitIndex: this.suitIndex,
						priceIndex: this.priceIndex
					};
					url += uni.$u.queryParams(query);
					toUrl(url);
				}

			}
		},
	};
</script>

<style lang="scss">
	.prices {
		text-decoration: line-through;
	}

	.tip-content {
		text-align: left;
		padding: 30rpx;
		height: 900rpx;
		font-size: $font-base;

		.head-info {
			border-bottom: 1px solid #eaebec;
		}

		.nav-info {
			border-bottom: 1px solid #eaebec;

			.left {
				width: 70%;
			}

			.right {
				width: 28%;
			}
		}

		.item-title {
			color: #666666;
			font-weight: bold
		}
	}

	page {
		background-color: #FFFFFF;
		padding-bottom: 100rpx;

		.inside-info {
			padding: 20rpx 20rpx 20rpx 30rpx;
			pointer-events: none;
			position: absolute;
			bottom: 0;
			background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .5));
			color: #FFFFFF;
			font-size: $font-base;
		}

		.line-start {
			position: absolute;
			bottom: 0;
			left: 0;
			font-size: $font-sm;
			background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .5));
			border-radius: 4px 0 4px 0;
			padding: 20rpx;
			color: #FFFFFF;
			width: 100%;
		}

		.detail-content {
			.head-title {
				font-size: $font-lt;
				font-weight: bold;
			}

			.active-icon {
				padding: 5rpx 0rpx 0 5rpx;
				border-radius: 20px 0 0 0;
				position: absolute;
				right: 0;
				bottom: 0;
			}

			.pack {
				.pack-item {
					width: 300rpx;
					background-color: #f3f8fe;
					margin: 10rpx;
					border: 1px solid #f3f3f3;
					.iconList{
						.icon{
							color:$-tour-price-color ;
							border: 1px solid;
							width: 25rpx;
							height: 25rpx;
							line-height: 25rpx;
						}
					}
				}

				.active {
					/* border-bottom: 10rpx solid;
                    min-width: 210rpx;
                    height: 100rpx;*/
					box-shadow: 0 2px 4px rgba(0, 0, 0, .06);
				}
			}

			.calendar {
				.price {
					color: $-tour-price-color;
				}

				.calendar-item {
					width: 210rpx;
					background-color: #f3f8fe;
					margin: 10rpx;
					height: 110rpx;
					border: 1px solid #f3f3f3;

					.name {
						font-size: $font-base;
					}
				}

				.active {
					/* width: 220rpx;
                    height: 120rpx;*/
					box-shadow: 0 2px 4px rgba(0, 0, 0, .06);
				}

				.show-more {
					background-color: #FFFFFF;
					padding: 3px 0 3px 10px;
					@include flex(column);
					align-items: center;
					position: absolute;
					right: 0;
					top: 0;
					box-shadow: -5px 0 5px rgba(0, 0, 0, 0.1);

					.text {
						font-size: $font-sm;
						width: 24rpx;
						/*color: #f56c6c;*/
						line-height: 16px;
					}
				}
			}

			.content-title {
				padding: 30rpx;
				background-color: #FFFFFF;

				.title {
					font-size: $font-lg;
					font-weight: bold;
				}

				.desc {
					font-size: $font-base;
					color: $uni-text-color-grey;
					margin-top: 15rpx;
				}

				.tags {
					width: 78%;

					.tags-item {
						margin-top: 10rpx;
						margin-right: 10rpx;
					}
				}

				.sales {
					font-size: $font-sm;
					color: $-color-muted;
				}

				.price-info {
					color: $-tour-price-color;
					margin-top: 20rpx;
					font-size: $font-lt;

					.price {
						font-size: 45rpx;
					}
				}
			}

			.content-tabs {
				background-color: #FFFFFF;
				padding-top: 20rpx;
				width: 100%;
				border-bottom: 1px solid #F3F3F3;
				height: 49px;
			}

			.share-btn {
				width: 82rpx;
				height: 82rpx;
				border-radius: 50%;
				background-color: #F9F9F9;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.merch-card {
				background-color: #FFFFFF;
				padding: 30rpx 40rpx;

				.merch-info {
					width: 70%;

					.name {
						font-size: $font-lt;

						.merch-tag {
							width: auto;
						}
					}
				}

				.btn {
					padding: 8rpx 30rpx;
					border-radius: 100rpx;
					font-size: $font-base;
					color: #FFFFFF;
				}
			}

			.u-content {
				.route-box {
					border-top: 2px solid;

					.day-num {
						border-radius: 0 0 160rpx 4px;
						color: white;
						display: inline-block;
						padding: 12rpx 50rpx 12rpx 25rpx;
						font-size: $font-lt;

					}

					.day-title {
						font-size: $font-lg;
						font-weight: bold;
						text-align: center;
					}

					.step-nav {
						padding: 30rpx 20rpx 20rpx 30rpx;

						.step-box {
							border-left: 1px dashed #F3F3F3;
							padding: 12rpx 0 20rpx 40rpx;

							.icon-box {
								width: 60rpx;
								height: 60rpx;
								background-color: #FFFFFF;
								border-radius: 50%;
								position: absolute;
								left: -31rpx;
								top: 0;
								display: flex;
								align-items: center;
								justify-content: center;

								.custom-icon {
									font-size: 50rpx;
									background-color: #FFFFFF
								}
							}

							.name {
								font-size: $font-lt;
								font-weight: bold;
							}

							.desc {
								font-size: $font-base;
							}
						}
					}
				}
			}
		}

		.fixed-buy-btn {
			position: fixed;
			z-index: 999;
			padding: 20rpx 30rpx;
			background-color: #FFFFFF;
			bottom: 0;
			box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.1);

			.other-btn {
				width: 32%;
			}

			.buy-btn {
				width: 62%;
			}
		}

		.share-box {
			.title {
				font-size: $font-base;
				color: $uni-text-color;
				padding: 10rpx;
			}

			.share-btn-info {
				margin: 50rpx 0 20rpx 0;

				button {
					margin: 0;
				}

				.btn-name {
					font-size: $font-sm;
					color: $uni-text-color-grey;
				}

				.icon-box {
					width: 95rpx;
					height: 95rpx;
					border-radius: 50%;
					background-color: #F9F9F9;

				}
			}

			.close {
				line-height: 100rpx;
			}
		}

		.share-image {
			width: 100%;
		}
	}
</style>